<script setup lang='ts'>
defineOptions({ name: 'AppIconList' })


const modules = import.meta.glob('../assets/icons/*.svg', { eager: true })
const iconNames = Object.keys(modules).map((path) => {
  return path
    .split('/')
    .pop()!
    .replace('.svg', '')
})

const name = ref('')
const { copy } = useClipboard()

function copyIcon(id: string) {
  copy(`<BaseIcon name="${id}" />`).then(() => {
    name.value = id
  })
  console.log('🚸🚸🚸 ~ copyIcon ~ 复制成功:', id)
}

function onAnimationend() {
  name.value = ''
}
</script>

<template>
  <ul class="flex flex-wrap m0 p0">
    <li v-for="id in iconNames" :key="id" style="font-size: 50px;">
      <div alt="复制组件" title="复制组件" :class="{ bounce: name === id }" @animationend="onAnimationend"
        class="flex flex-col items-center p-[5px] justify-center cursor-pointer" @click="() => copyIcon(id)">
        <BaseIcon :name="id" /> <span class="text-xs">{{id }}</span>
      </div>
    </li>
  </ul>
</template>

<style lang='scss' scoped>
.bounce {
  animation-name: ani-bounce;
  animation-duration: .5s;
}

@keyframes ani-bounce {

  0%,
  20%,
  53%,
  80%,
  100% {
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    transform: translateZ(0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -9px, 0);
  }

  70% {
    animation-timing-function: cubic-bezier(.755, .05, .855, .06);
    transform: translate3d(0, -5px, 0);
  }

  90% {
    transform: translate3d(0, -2px, 0);
  }
}
</style>
